<template>
  <!-- 发出的消息 -->

  <div class="Bian">
    <el-container class="shoudao">
      <el-header class="sousoud" style="height:40px">
        <el-button plain  type="danger" @click="delpls()">删除选中</el-button>

      </el-header>

      <el-main class="maind">


        <el-table
          ref="multipleTable"
          :data="datas"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            width="55"
            label="头像">
            <el-image
              style="width: 50px; height: 50px"
              :src=datas.photoPath
             ></el-image>
          </el-table-column>


          <el-table-column
            label="标题"
            width="120">
            <template slot-scope="scope"><el-link>{{ scope.row.mailTitle }}</el-link></template>
          </el-table-column>

          <el-table-column
            prop="receiverName"
            label="接受人"
            show-overflow-tooltip>
          </el-table-column>


          <el-table-column
            prop="created"
            label="时间"
            width="200">
          </el-table-column>



        </el-table>
      </el-main>
      <el-footer>
        <div class="chaspan">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage2"
              :page-sizes="[5, 10, 20,25,26,27,30]"
              :page-size="10"
              layout="sizes, prev, pager, next"
              :total="Fenlongs"
            ></el-pagination>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import xinxiGli from "@/api/xiaoxi/xiaoxi";
import seleRYName from "@/api/xiaoxi/SelName/seleRYName";

export default {
  name: "",
  data() {
    return {
      datas: [],


      FaChuAll: [],
      i: 0,
      ids: [],
      currentPage2: 2,
      //总长度
      Fenlongs: 0,
      //分页数据
      user: { pageIndex: 1, pageSize: 5 }
    };
  },
  created() {
    // this.SelectFasong(); //发送的消息
    this.SelectFasongFen(); //分页查询
    this.handleCurrentChange(), this.handleSizeChange();
  },
  methods: {
    //查询发送的消息
    SelectFasong() {
      xinxiGli.SelectFa().then(res => {
        this.FaChuAll = res;
        console.log(this.FaChuAll.records);
      });

      this.datas.length = this.Fenlongs;
    },

    //时间格式
    updateTimeFmt(row) {
      return new Date(row.updateTime).toLocaleString();
    },

    RyName() {
      seleRYName.RYName().then(res => {});
    },



    //搜索
    SelectAll() {
      this.SelectFasongFen();
    },

    //每页几条
    handleSizeChange(val) {
      this.user.pageSize = val;
      console.log(`每页 ${this.user.pageSize} 条`);
      this.SelectFasongFen();
    },

    //当前页
    handleCurrentChange(val) {
      this.user.pageIndex = val;
      console.log(`当前页: ${this.user.pageIndex}`);
      this.SelectFasongFen();
    },


    //复选框事件
    handleSelectionChange(val) {
      this.ids = []
      for (const i of val){
        this.ids.push(i.mailId)
      }
      console.log(this.ids)
    },


    //删除选中
    //删除选中
    delpls() {
      xinxiGli
        .xiaoxidel(this.ids)
        .then(res => {
          console.log("删除成功")
        })

      this.SelectFasongFen();
    },

    //分页查询
    SelectFasongFen() {
      xinxiGli.SelectFaFen(this.user).then(res => {
        this.FaChuAll = res;
        console.log(this.FaChuAll);
        this.datas = this.FaChuAll.records;
        this.Fenlongs = this.FaChuAll.total;
      });
    }
  }
};
</script>

<style scoped lang="scss">

  .times{
    margin-left: 82%;
  }
  .namespan{
    display:inline-block;

  }
  .namespan strong{
    display: inline-block;
    width: 100px;
  }
  .namespan tr:nth-child(1) td{
    padding-bottom: 15px;

  }


  .namespan tr:nth-child(2){
    background-color: #F3F9FE;
    /*border-radius: 10px;*/
    /*border: 1px solid rgba(155, 153, 153, 0.432);*/
    padding-left: 20px;
  }

  .namespan tr:nth-child(3){    background-color: #F3F9FE;}
  .fortr span:nth-child(2){
    width: 100%;
  }
  .namespan tr td {
    display: inline-block;
    width: 100%;
  }


  .fortr span:nth-child(2) tr:nth-child(2) td {
    padding-top: 10px;
    font-size: 15px;
    height: 70px;
    width: 100%;
  }

  .smMai {
    color: #666666;
    font-size: 13px;
  }

  .fortr {
    display: flex;
    padding-top: 6px;

  }

  .fortr span {
    margin-right: 10px;
  }


  .fortr span tr {
    display: inline-block;
    margin-top: 2px;
    width: 100%;

  }

  .el-icon-s-opportunity {
    font-size: 40px;
  }

  .maind {
    overflow: scroll;
    height: 600px;
  }

  .shoudao .el-footer {
    width: 100%;
    padding: 0;
  }

  // 这是收到
  .maind {
    overflow: scroll;
    height: 600px;
  }

  tr td {
    font-size: 12px;
    color: rgb(30,137,250);
  }



  .shoudao .chaspan .el-button-group {
    background-color: white;
    margin: 2px;
  }


  .shoudao .chaspan {
    display: flex;
    justify-content: center;
    /*background-color: rgb(242, 242, 242);*/
  }

  .shoudao .chaspan span {
    display: flex;
  }

  .shoudao .chaspan small {
    margin-top: 10px;
  }

  .shoudao .chaspan span input {
    width: 30px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .shoudao .chaspan span .el-select {
    width: 65px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .shoudao .fortr {
    /*border: 1px solid rgb(192, 192, 192);*/
    height: 80px;
    margin-top: 10px;
  }

  .diveven {
    padding: 10px;

  }

  .shoudao .diveven .fortr {
    border: 1px solid #EEEEEE;
    height: 130px;
  }

  .fortrB {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }



  .shoudao .shoudao > .el-header {
    background-color: rgb(242, 242, 242);
    border: 1px solid rgb(192, 192, 192);
  }

  .shoudao .roa .el-col:nth-child(1) {
    text-align: right;
    margin-top: 12px;
    font-size: 12px;
  }

  .shoudao .el-input {
    width: 200px;
  }

  // 收到底部
</style>
